<template>
  <div>
    <el-container>
      <el-header class="header" height="100px">
        <h2 class="header_logo">学生管理系统</h2>
        <div class="header_right">
          <!-- 判断username为空时不显示，有内容时显示 -->
          <p v-if="username" class="header_content">欢迎：{{username}}</p>
          <p v-if="username" class="header_btn" @click="cancellation()">注销</p>
        </div>
      </el-header>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 默认为当前的本地存储用户名
      username: localStorage.getItem("usr"),
      // isShow: false,
    };
  },
  watch: {
    "$route.path": function () {
      this.username = localStorage.getItem("usr");
      this.isShow = localStorage.getItem("usr");
    },
  },
  methods: {
    cancellation() {
      localStorage.clear();
      this.$router.push("/login");
    },
  },
};
</script>
<style scoped>
* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}
.header {
  width: 100%;
  background-image: url("../../public/image/header.jpg");
  background-repeat: no-repeat;
  background-size: 100%, 100%;
}
.header_logo {
  font-size: 30px;
  line-height: 100px;
  color: white;
  margin-left: 28px;
  font-weight: inherit;
  float: left;
}
.header_right {
  width: 220px;
  height: 30px;
  float: right;
  margin-top: 60px;
}
.header_content {
  width: 150px;
  font-size: 16px;
  color: white;
  line-height: 30px;
  float: left;
}
.header_btn {
  width: 50px;
  font-size: 16px;
  color: rgb(57, 132, 230);
  line-height: 30px;
  text-align: center;
  float: right;
}
.header::before,
.header::after {
  content: "";
  display: block;
  clear: both;
}
</style>